import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Badge, Typography, Spin, Tag, Tooltip } from 'antd';
import { 
  TrophyOutlined, 
  StarOutlined, 
  FireOutlined,
  CrownOutlined,
  GiftOutlined
} from '@ant-design/icons';
import { statisticsService } from '../services/api';

const { Title, Text } = Typography;

interface Achievement {
  id: number;
  achievement_type: string;
  achievement_name: string;
  achievement_description: string;
  points_reward: number;
  unlocked_at: string;
}

const AchievementsSection: React.FC = () => {
  const [achievements, setAchievements] = useState<Achievement[]>([]);
  const [loading, setLoading] = useState(false);

  const loadAchievements = async () => {
    setLoading(true);
    try {
      const response = await statisticsService.getAchievements();
      if ((response as any).success) {
        setAchievements((response as any).data);
      }
    } catch (error) {
      console.error('加载成就数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadAchievements();
  }, []);

  const getAchievementIcon = (type: string) => {
    switch (type) {
      case 'first_focus':
        return <StarOutlined style={{ color: '#52c41a' }} />;
      case 'focus_streak_3':
      case 'focus_streak_7':
      case 'focus_streak_30':
        return <FireOutlined style={{ color: '#fa8c16' }} />;
      case 'total_focus_10':
      case 'total_focus_50':
      case 'total_focus_100':
        return <TrophyOutlined style={{ color: '#faad14' }} />;
      case 'study_plan_creator':
        return <CrownOutlined style={{ color: '#722ed1' }} />;
      default:
        return <GiftOutlined style={{ color: '#1890ff' }} />;
    }
  };

  const getAchievementColor = (type: string) => {
    switch (type) {
      case 'first_focus':
        return '#52c41a';
      case 'focus_streak_3':
        return '#fa8c16';
      case 'focus_streak_7':
        return '#f50';
      case 'focus_streak_30':
        return '#722ed1';
      case 'total_focus_10':
        return '#1890ff';
      case 'total_focus_50':
        return '#faad14';
      case 'total_focus_100':
        return '#f50';
      default:
        return '#1890ff';
    }
  };

  if (loading) {
    return (
      <Card title="我的成就" extra={<TrophyOutlined />}>
        <div style={{ textAlign: 'center', padding: '20px' }}>
          <Spin size="large" />
        </div>
      </Card>
    );
  }

  return (
    <Card title="我的成就" extra={<TrophyOutlined />}>
      {achievements.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '20px' }}>
          <Text type="secondary">暂无成就，继续努力吧！</Text>
        </div>
      ) : (
        <Row gutter={[16, 16]}>
          {achievements.slice(0, 6).map((achievement) => (
            <Col xs={24} sm={12} lg={8} key={achievement.id}>
              <Tooltip title={achievement.achievement_description}>
                <Card
                  size="small"
                  style={{
                    border: `2px solid ${getAchievementColor(achievement.achievement_type)}`,
                    borderRadius: '8px',
                    background: 'linear-gradient(135deg, #f6f9fc 0%, #ffffff 100%)'
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                    {getAchievementIcon(achievement.achievement_type)}
                    <Text strong style={{ marginLeft: '8px', color: getAchievementColor(achievement.achievement_type) }}>
                      {achievement.achievement_name}
                    </Text>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Tag color={getAchievementColor(achievement.achievement_type)}>
                      +{achievement.points_reward}积分
                    </Tag>
                    <Text type="secondary" style={{ fontSize: '12px' }}>
                      {new Date(achievement.unlocked_at).toLocaleDateString()}
                    </Text>
                  </div>
                </Card>
              </Tooltip>
            </Col>
          ))}
        </Row>
      )}
    </Card>
  );
};

export default AchievementsSection;
